Jquery项目中使用vue.js | 您所在的位置:网站首页 › jq 组件库 › Jquery项目中使用vue.js |
大家在工作的情况中,可能会遇到之前的老项目采用jq书写,或者修改或者新增功能在jq中,原始jq的项目,代码可维护性很差,一个页面几千行jq,可维护性很差,工作量巨大,所以这个时候大家可以引入vue.js。 第一步:引入vue.js这里给大家提供两种方式 cdn: 本地文件导入: 下载地址: 阿里云地址:阿里云盘分享 注意:vue.js要在jq.js之前引入 第二步:创建一个vue实例在自己的js文件代码中创建一个vue实例,测试一下 var app = new Vue(); console.log(app);打印结果: 到这步,就说明我的vue实例创建成功可以使用vue的语法和生命周期函数了。
复制代码: 这里的el后面跟的是整个页面最大父级的id 我这边取名就叫app 大家写的时候,别忘在页面最大的父级绑定一个id,然后el的值就是大家绑定的id。这个很重要 // 使用vue实例 可以使用vue的方法和生命函数 new Vue({ el:'#app', data:{ text:'这是一个vue实例', list:['1','2','3'] }, methods:{ initData(){ this.list=['我爱你','你爱我','哈哈哈哈'] } }, created(){ this.initData() }, });最后希望可以帮助到大家,创作不易,请点个赞再走! |
CopyRight 2018-2019 实验室设备网 版权所有 |